<template>
  <page-wrap
    :show-top="false"
    back
    hideTab
    :dark="true"
    style="overflow-y: hidden"
    :hideSafeArea="true"
  >
    <template v-slot:title>
      <view class="titleTop">
        <view class="title2" v-if="showTitle">
          {{ splitTitleText }}
          <button
            v-if="personId"
            @click="clickCollect"
            :class="[positionInfo.isCollect ? 'interested' : 'unintrested']"
          >
            {{ positionInfo.isCollect ? '已关注' : '关注' }}
          </button>
          <button
            v-else-if="isAuthSetting"
            :class="[positionInfo.isCollect ? 'interested' : 'unintrested']"
            @click="showLoginDialog"
            type="success"
          >
            {{ positionInfo.isCollect ? '已关注' : '关注' }}
          </button>
          <button
            v-else
            @click="clickCollect"
            :class="[positionInfo.isCollect ? 'interested' : 'unintrested']"
            @getuserinfo="getUserInfo"
            :loading="getUserInfoLoading"
            type="success"
          >
            {{ positionInfo.isCollect ? '已关注' : '关注' }}
          </button>
        </view>
      </view>
    </template>
    <view
      class="wrapper"
      :style="'padding-top:' + navHeight + 'px;'"
      type="line"
    >
      <view class="header" :style="'top:' + navHeight + 'px;'"></view>
      <view
        class="menu menuFixed"
        :style="'top:' + navHeight + 'px;'"
        v-if="menuTop"
      >
        <u-tabs
          :current="currentIndex"
          name="title"
          :list="dynamicDimensionList"
          @change="handleCateClick"
          height="60"
          :active-item-style="activeItemStyle"
          :gutter="24"
          :bar-style="barStyle"
          font-size="28"
          :inactive-color="'#999999'"
        ></u-tabs>
      </view>
      <scroll-view
        :style="'height: calc(100vh - ' + navHeight + 'px)'"
        :scroll-y="true"
        @scroll="watchScroll"
        scroll-with-animation
        :scroll-into-view="scrollDomId"
      >
        <view>
          <view class="positionInfo">
            <view
              class="collectMask_bottom"
              :style="{
                display: collectShow && collectShowFirst ? 'flex' : 'none',
                right: positionInfo.isShowQrCode == '1' ? '40rpx' : '0'
              }"
            >
              <view class="close" @click="closeMask">×</view>
            </view>
            <view class="styleTitle">
              <view class="positionName">{{ positionName }}</view>
              <view class="styleTitleRight">
                <button
                  :class="positionInfo.isCollect ? 'btn' : 'btn aloha'"
                  @click="clickCollect"
                  v-if="personId"
                >
                  {{ positionInfo.isCollect ? '已关注' : '关注' }}
                </button>
                <button
                  v-else-if="isAuthSetting"
                  :class="positionInfo.isCollect ? 'btn' : 'btn aloha'"
                  @click="showLoginDialog"
                  type="success"
                >
                  {{ positionInfo.isCollect ? '已关注' : '关注' }}
                </button>
                <button
                  v-else
                  :class="positionInfo.isCollect ? 'btn' : 'btn aloha'"
                  open-type="getUserInfo"
                  :hair-line="false"
                  @getuserinfo="getUserInfo"
                  :loading="getUserInfoLoading"
                  type="success"
                >
                  {{ positionInfo.isCollect ? '已关注' : '关注' }}
                </button>
                <image
                  v-if="positionInfo.isShowQrCode == '1'"
                  :src="iconQrcodeSrc"
                  class="styleQrcode"
                  @click="clickQrCode"
                ></image>
              </view>
            </view>
            <view class="positionDesc"
              >{{ topTitle && topTitle != 'null' ? topTitle : '--'
              }}{{ parentTitle ? ' · ' + parentTitle : '' }}
            </view>
            <view class="positionUpdate">
              <view>最近更新于 {{ timeUpdate(positionInfo.updateTime) }}</view>
              <view class="styleJobDetailViewNumber">
                <image
                  class="styleImageJobDetailView"
                  :src="srcJobDetailView"
                ></image
                ><span class="styleTextJobDetailViewNumber">{{
                  positionInfo.viewNum || 0
                }}</span>
              </view>
            </view>
            <view class="positionDefine">
              <view class="bottom">
                <view class="content">
                  <view class="my-introduction" @click="changeHeight">{{
                    positionIntroduction
                  }}</view>
                  <view class="glass" v-if="!showAllText"></view>

                  <view
                    v-if="
                      positionIntroduction && positionIntroduction != '暂无数据'
                    "
                    :class="[showAllText ? 'avatar-rotate' : 'avatar']"
                    @click="changeHeight"
                  >
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="menu">
            <u-tabs
              :current="currentIndex"
              name="title"
              :list="dynamicDimensionList"
              @change="handleCateClick"
              height="60"
              :active-item-style="activeItemStyle"
              :gutter="24"
              :bar-style="barStyle"
              font-size="28"
              :inactive-color="'#999999'"
            ></u-tabs>
          </view>
          <view class="componentsOrder">
            <view
              v-for="(item, index) in dynamicDimensionList"
              :key="item.layerId"
              class="componentsOut"
            >
              <view class="scrollItemToTop" :id="'scrollItem' + index"></view>
              <!-- 专业分布 -->
              <ProfessionTab
                class="scrollItem"
                :title="item.title"
                :positionName="positionName"
                :positionId="positionId"
                :layerId="item.children[0].layerId"
                :pageName="this.pageName"
                :personId="personId"
                :isAuthSetting="isAuthSetting"
                v-if="item.showType == 'profession'"
                @refreshData="refreshData"
              >
              </ProfessionTab>
              <!-- 职业画像 -->
              <ProfessionPersona
                class="scrollItem"
                :title="item.title"
                :positionName="positionName"
                :positionId="positionId"
                :layerId="item.layerId"
                :pageName="this.pageName"
                :personId="personId"
                :isAuthSetting="isAuthSetting"
                v-if="item.showType == 'professionPersona'"
                @refreshData="refreshData"
              ></ProfessionPersona>

              <!-- 职业发展路径 -->
              <ProfessionPathWay
                class="scrollItem"
                :title="item.title"
                :positionName="positionName"
                :positionId="positionId"
                :layerId="item.layerId"
                :pageName="this.pageName"
                :personId="personId"
                :isAuthSetting="isAuthSetting"
                v-if="item.showType == 'professionPathWay'"
                @refreshData="refreshData"
              ></ProfessionPathWay>

              <!-- 招聘配置、职业前景 showType == 'tree' 的通用内容-->
              <JobDescriptionTab
                class="scrollItem"
                :title="item.title"
                :positionName="positionName"
                :positionId="positionId"
                :layerId="item.layerId"
                :pageName="this.pageName"
                :personId="personId"
                :isAuthSetting="isAuthSetting"
                v-if="item.showType == 'tree'"
                @refreshData="refreshData"
              >
              </JobDescriptionTab>
              <MainTasks
                class="scrollItem"
                :title="item.title"
                :positionId="positionId"
                v-else-if="item.showType == 'text'"
                :questionId="item.questionId"
              ></MainTasks>
              <SalarySolution
                class="scrollItem"
                :title="item.title"
                :layerId="item.layerId"
                :positionId="positionId"
                :isCollect="positionInfo.isCollect"
                :positionName="positionName"
                :personId="personId"
                :isAuthSetting="isAuthSetting"
                v-else-if="item.showType == 'chart'"
                @collected="collected"
                @onLoginSuccess="onLoginSuccess"
              ></SalarySolution>
              <RecommendedPositions
                class="scrollItem"
                :title="item.title"
                :layerId="item.layerId"
                :jobName="positionName"
                :positionId="positionId"
                v-else-if="item.showType == 'position'"
              >
              </RecommendedPositions>
              <CorrespondingMajors
                class="scrollItem"
                :positionId="positionId"
                :layerId="item.layerId"
                :title="item.title"
                v-else-if="item.showType == 'major'"
              ></CorrespondingMajors>
              <!-- 职讯  -->
              <PositionMessages
                class="scrollItem"
                :positionId="positionId"
                :layerId="item.layerId"
                :title="item.title"
                :jobName="positionName"
                v-else-if="item.showType == 'article'"
              ></PositionMessages>
              <!-- 职说  -->
              <PositionSays
                class="scrollItem"
                :positionId="positionId"
                :layerId="item.layerId"
                :title="item.title"
                :jobName="positionName"
                v-else-if="item.showType == 'video'"
              ></PositionSays>
              <Benchmark
                class="scrollItem"
                ref="benchmark"
                :positionId="positionId"
                :layerId="item.layerId"
                :title="item.title"
                :jobName="positionName"
                :isCollect="positionInfo.isCollect"
                v-else-if="item.showType == 'pole'"
              ></Benchmark>
              <Benchmark
                class="scrollItem"
                ref="benchmark2"
                :positionId="positionId"
                :layerId="item.layerId"
                :title="item.title"
                :jobName="positionName"
                :isCollect="positionInfo.isCollect"
                v-else-if="item.showType == 'report'"
              ></Benchmark>
            </view>
            <view class="bottomText">到底啦~</view>
            <view class="emptyForIphone"></view>
          </view>
        </view>
      </scroll-view>
    </view>
    <u-popup
      class="styleQrcodePop"
      :custom-style="customPopStyle"
      v-model="isQrcodeShow"
      mode="center"
      :closeable="true"
      width="530rpx"
      height="668rpx"
    >
      <!-- @longtap="generateQrCode" -->
      <view class="styleQrcodePopContainer">
        <span class="styleQrcodePopTitle">扫码进群了解更多</span>
        <img
          :src="positionInfo.qrCode"
          class="styleUserQRCode"
          :show-menu-by-longpress="true"
        />
        <!-- <img
          src="https://upload.yl1001.com/upload/images/view?file=tQLd8xRYlZe7D/_u7k=r_btF-8,Iw9HfJ6A5l15nUkeUlMl22a7yi=ufn5dhp.jpg"
          class="styleUserQRCode" :show-menu-by-longpress="true" /> -->
        <span class="styleQrcodePersonName"> </span>
      </view>
      <view class="styleQrcodeSaveContainer" @click="saveToAlbum">
        <span class="styleQrcodeSave">保存二维码至相册</span>
      </view>
    </u-popup>
    <u-popup
      class="stylePopUnlockSuccess"
      v-model="isUnlockSuccessPopupShow"
      mode="center"
      :mask-close-able="true"
      :mask="true"
    >
      <view class="styleUnlockSuccessContainer">
        <image :src="srcUnlockSuccess" class="styleUnlockSuccess"></image>
      </view>
    </u-popup>

    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import {
  addToCollection,
  cancelCollection,
  getHomepageLayerData,
  getPositionInfo,
  getJobDescriptionUnlockAndShare,
  getPositionExtend,
  addBuryingPoint,
  getUserInfo,
  cardRegist,
  getPersonOrDefaultCardType
} from '@/api/modules/career';
import WxLoginMixin from '@/mixins/wxLogin';
import ShareMixin from '@/mixins/share';
import ReportShareMixin from '@/mixins/reportShare';
import ProfessionPersona from './components/professionPersona.vue';
import ProfessionPathWay from './components/professionPathWay.vue';
import JobDescriptionTab from './components/jobDescriptionTab.vue';
import ProfessionTab from './components/professionTab.vue';
import SalarySolution from './components/positionDetailComponents/salarySolution';
import MainTasks from './components/positionDetailComponents/mainTasks';
import RecommendedPositions from './components/positionDetailComponents/recommendedPositions';
import CorrespondingMajors from './components/positionDetailComponents/correspondingMajors';
import PositionMessages from './components/positionDetailComponents/positionMessages';
import PositionSays from './components/positionDetailComponents/positionSays';
import Benchmark from './components/positionDetailComponents/benchmark';
import CheckMore from './components/positionDetailComponents/checkMore';
import LoginDialog from '@/components/LoginDialog';
import { throttle } from 'lodash';

let componentsName = [
  '主要工作任务',
  '薪酬情况',
  '职位推荐',
  'AI与职业发展关系',
  '晋升通道',
  '对口专业',
  '职讯',
  '职说',
  '标杆'
];
export default {
  name: 'positionDetail',
  mixins: [WxLoginMixin, ShareMixin, ReportShareMixin],
  components: {
    ProfessionTab,
    JobDescriptionTab,
    ProfessionPersona,
    ProfessionPathWay,
    SalarySolution,
    MainTasks,
    RecommendedPositions,
    CorrespondingMajors,
    PositionMessages,
    PositionSays,
    Benchmark,
    CheckMore,
    LoginDialog
  },
  data() {
    return {
      //私聊分享名称
      chatShareTitle: null,
      //朋友圈分享名称
      platformShareTitle: null,
      advertiseShow: true,
      advertiseShowZhixun: true,
      maskMessage:
        this.$imgBaseSelf + 'career/positionDictionary/maskMessage.png',
      collectShowFirst: true,
      collectShow: false,
      menuTop: false,
      isDark: false,
      orderList: [null, null, null, null, null, null, null, null, null],
      dynamicDimensionList: [], //tab栏控制数组
      showTitle: false,
      topBg: `red`,
      arrowRight: this.$imgBaseSelf + 'common/arrowRight.png',
      positionInfo: {
        isCollect: false
      },
      positionIntroduction: '', //展示的字符（50个）
      shortIntroduction: '',
      allIntroduction: '',
      showAllText: false,
      navHeight: 0,
      connecting: false,
      loading: false,
      positionName: '',
      positionId: '',
      parentTitle: '',
      salaryData: {},
      showTop: false,
      topTitle: '',
      personId: uni.getStorageSync('person-id').slice(2) || '',
      shareQuery: `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10&positionName=${this.positionName}&positionId=${this.positionId}&parentTitle=${this.parentTitle}&topTitle=${this.topTitle}`,
      sharePath: `/pagesSub/careerNewPositionDictionary/positionDetail?${this.shareQuery}`,
      isHaveQrCode: '2',
      iconCollectSelectedSrc:
        this.$imgBaseSelf + 'career/positionDictionary/collect_selected.webp',
      iconCollectUnSelectedSrc:
        this.$imgBaseSelf + 'career/positionDictionary/collect_unselect.webp',
      iconQrcodeSrc:
        this.$imgBaseSelf + 'careerPath/positionDictionary/miniQrCode.png',
      srcUnlockSuccess:
        this.$imgBaseSelf + 'career/positionDictionary/unlock_success.webp',
      isQrcodeShow: false,
      customPopStyle: {},
      isCollectShowPaddingStyle: true,
      srcJobDetailView:
        this.$imgBaseSelf + 'careerPath/positionDictionary/eye.png',
      activeItemStyle: {
        'font-weight': '600',
        color: '#000000',
        'font-size': '32rpx'
      },
      currentIndex: 0,
      barStyle: {
        width: '20px',
        height: '8px',
        background:
          'linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #F75A3E 100%)',
        'border-radius': '4px',
        left: '0',
        bottom: '0rpx'
      },
      scrollDomId: '',
      isClickScroll: false,
      isUnlockSuccessPopupShow: false,
      scrollTop: 0,
      positionInfoHeight: 0,
      pageName: '',
      shareCareerInfoParams: {},
      buryingPointId: '',
      cardType: ''
    };
  },
  onLoad(opt) {
    this.positionName = opt.positionName || '';
    this.shareTitle = this.positionName;
    this.positionId = opt.positionId || '';
    this.parentTitle = opt.parentTitle || '';
    this.topTitle = opt.topTitle || '';
    this.navHeight = getApp().globalData.navHeight - 5;
    this.getHomepageData();
    this.shareQuery = `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10&positionName=${this.positionName}&positionId=${this.positionId}&parentTitle=${this.parentTitle}&topTitle=${this.topTitle}`;
    this.sharePath = `/pagesSub/careerNewPositionDictionary/positionDetail?${this.shareQuery}`;
    this.getLockAndShareState();
    this.getShareTitle();
    this.pageName = opt.pageName;
    this.shareContent.contentType = '1';

    let jumpPersonId = '';
    if (opt.jumpPersonId) {
      jumpPersonId = opt.jumpPersonId;
    }
    let jumpSource = '';
    if (opt.jumpSource) {
      jumpSource = opt.jumpSource;
    }
    let sourceType = '';
    if (opt.sourceType) {
      sourceType = opt.sourceType;
    }

    this.shareCareerInfoParams = {
      //分享参数
      etId: 20047,
      id: this.buryingPointId ? this.buryingPointId : '', //后台要求不能传空，未登录也要统计
      personId: uni.getStorageSync('person-id').slice(2) || '0',
      cardType: this.cardType
        ? this.cardType
        : uni.getStorageSync('cardType') || this.cardType,
      consultantId: uni.getStorageSync('sellId')
        ? uni.getStorageSync('sellId')
        : '',
      originType: this.originFrom == 'shareLink' ? 10 : 20,
      statType: '40',
      jumpPersonId: jumpPersonId,
      jumpSource: jumpSource,
      sourceType: sourceType
    };
    //外部链接点击统计事件
    if (jumpSource && sourceType) {
      this.addBuryingPointFn(20081, '50', jumpPersonId, jumpSource, sourceType);
    }
  },
  onShow() {
    this.addBuryingPointFn(20094, '', '', '', '');
    wx.reportEvent('job_detail_enter_click', {}); //职业详情—进入职业详情页
    this.getDetail();
    if (this.$refs.benchmark) {
      this.$refs.benchmark[0].getLayerDetail();
      this.$refs.benchmark2[0].getLayerDetail();
    }
  },
  activated() {
    console.log('activated');
    console.log('this.$refs', this.$refs);
    if (this.$refs.benchmark) {
      this.$refs.benchmark[0].getLayerDetail();
      this.$refs.benchmark2[0].getLayerDetail();
    }
  },
  computed: {
    splitTitleText: function () {
      if (!this.positionName) return '';
      if (this.positionName.length > 5) {
        return this.positionName.slice(0, 5) + '...';
      }
      return this.positionName;
    }
  },
  mounted() {
    this.checkAuthSetting();
    // this.setNavigationBar();
    this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
    // if (!this.personId) {
    //   this.showLoginDialog();
    // }
  },
  methods: {
    setNavigationBar() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: ''
      });
    },
    changeHeight() {
      this.showAllText = !this.showAllText;
      if (this.showAllText) {
        this.positionIntroduction = this.allIntroduction;
      } else {
        this.positionIntroduction = this.shortIntroduction;
      }
    },
    async cardRegistFn() {
      const params = {
        cardKey: this.cardKey || '1', // cardType或者cardKe至少传一个
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync('cardType') || this.cardType,
        sellId: +this.consultantId
      };
      const res = await cardRegist(params);
      if (res.code != 200) {
        uni.showToast({ icon: 'none', title: res.status_desc, duration: 1500 });
      }
    },
    async getUserInfoFn() {
      const params = { uid: '' };
      const res = await getUserInfo(params);
      if (res.code == 200) {
        // cardNoe和cardType是同时存在的
        await this.getPersonOrDefaultCardTypeFn();
        if (!res.data.cardNo) {
          // 说明此时没有绑卡 要自动绑卡(这里是针对中学生的项目)
          await this.cardRegistFn();
        }
      }
    },
    async getPersonOrDefaultCardTypeFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        cardSource: 'HIGH_ASSESSMENT' // 如果是默认注册是关于高考的卡，就要穿这个参数获取到cardType
      };
      const res = await getPersonOrDefaultCardType(params);
      if (res.code == 200 && res.data.cardType) {
        this.cardType = res.data.cardType;
        uni.setStorageSync('cardType', res.data.cardType);
      }
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : '', //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync('person-id').slice(2) || '0',
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync('cardType') || this.cardType,
        consultantId: uni.getStorageSync('sellId')
          ? uni.getStorageSync('sellId')
          : '',
        originType: this.originFrom == 'shareLink' ? 10 : 20,
        statType: statType ? statType : '10',
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType
      };
      const res = await addBuryingPoint(params);
    },
    getShareTitle() {
      getPositionExtend({ positionId: this.positionId }).then((res) => {
        if (res.code == 200) {
          this.chatShareTitle = res.data.chatShareTitle;
          this.platformShareTitle = res.data.platformShareTitle;
        }
      });
    },
    closeAdvertise() {
      this.advertiseShow = false;
    },
    enterAdvertise() {
      uni.navigateTo({
        url: '/pagesSub/career/activity/vocationalAssessment?fromWhere=junior'
      });
    },
    enterAdvertiseZhixun() {
      uni.navigateTo({
        url:
          '/pagesSub/career/careerInfo/articleDetail?id=3111699239989233&relatedType=2' +
          '&positionId=' +
          this.positionId
      });
    },
    collected() {
      this.positionInfo.isCollect = true;
    },
    closeMask() {
      this.collectShow = false;
      this.collectShowFirst = false;
    },
    handleJump(personId) {
      uni.showToast({
        title: '登录成功',
        icon: 'none'
      });
      this.personId = personId;
      this.getDetail();
      if (!this.positionInfo.isCollect) {
        this.clickCollect();
      }
    },
    handleCateClick(index) {
      this.isClickScroll = true;
      this.showTitle = true;
      this.isDark = false;
      this.currentIndex = index;
      // this.scrollDomId = "scrollItem" + index;
      this.menuTop = true;
      //这一步为了解决scroll-view bug，上拉顶部有时候不滚动，会失效的问题
      // if (this.scrollTop < this.positionInfoHeight) {
      //给个随意值，防止不滚动更新scrollTop直接点击tab闪动
      // this.scrollTop = 100;
      this.scrollDomId = '0';
      setTimeout(() => {
        console.log('this.scrollDomId', this.scrollDomId);
        this.scrollDomId = 'scrollItem' + index;
      }, 50);
      // }
    },
    generateQrCode() {
      uni.scanCode({
        scanType: ['qrCode', 'barCode'],
        success: function (res) {
          console.log(res);
        }
      });
    },
    watchScroll: throttle(function (e) {
      if (this.isClickScroll) {
        this.isClickScroll = false;
        return;
      }
      let top = e.detail.scrollTop;
      // console.log(Date.parse(new Date()));
      this.scrollTop = top;
      // console.log("top", top);
      if (top > 50) {
        this.showTitle = true;
        this.isDark = false;
      } else {
        this.isDark = true;
        this.showTitle = false;
      }
      uni
        .createSelectorQuery()
        .selectAll('.scrollItem')
        .boundingClientRect((rects) => {
          if (rects[0].top < 120) {
            this.menuTop = true;
          } else {
            this.menuTop = false;
          }
          for (let i = 0; i < rects.length; i++) {
            // console.log(rects[i].top);

            if (rects[i].top < 140) {
              this.currentIndex = i;
            } else {
              return;
            }
          }
        })
        .exec();
    }, 100),
    getDetail() {
      const params = {
        positionId: this.positionId,
        personId: this.personId
      };
      getPositionInfo(params).then((res) => {
        if (res.code == 200) {
          this.positionInfo = res.data;
          this.shortIntroduction = this.positionInfo.introduce.substring(0, 50);
          this.allIntroduction = this.positionInfo.introduce;
          this.positionIntroduction = this.shortIntroduction;
          this.collectShow = !res.data.isCollect;
          if (res.data.topName) {
            this.topTitle = res.data.topName;
          }
          if (res.data.parentName) {
            this.parentTitle = res.data.parentName;
          }
          if (res.data.positionName) {
            this.positionName = res.data.positionName;
          }
          this.$nextTick(() => {
            uni
              .createSelectorQuery()
              .in(this)
              .select('.positionInfo')
              .boundingClientRect((rect) => {
                this.positionInfoHeight = rect.height;
                console.log('元素高度为：' + rect.height);
              })
              .exec();
          });
        }
      });
    },
    getHomepageData() {
      const params = {
        id: this.positionId
      };
      getHomepageLayerData(params).then((res) => {
        console.log('getHomepageLayerData', res.data);
        if (res.code == 200) {
          this.dynamicDimensionList = res.data;
        } else {
          console.log('请求失败');
        }
      });
    },
    setComponentData(list) {
      let result = [];
      let order = 0;
      list.forEach((lis) => {
        let Index = componentsName.indexOf(lis.title);
        lis.order = order;
        this.$set(this.orderList, Index, lis);
        order++;
      });
      console.log('this.orderList', this.orderList);
    },
    truncation(list) {
      if (list.length > 0) {
        let arr = list.split('、');
        let num = 0;
        let currentIndex = 0;
        let box = 0;
        arr.forEach((item, index) => {
          num += item.length + 2;
          if (box == 0) {
            currentIndex++;
            if (num > 20) {
              box = 1;
              num = item.length;
            }
          } else if (box == 1) {
            box = 2;
            if (num > 20) {
              return;
            } else {
              currentIndex++;
            }
          } else {
            return;
          }
        });
        return arr.slice(0, currentIndex);
      } else {
        return [];
      }
    },
    clickCollect() {
      if (!this.personId) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }
      console.log('clickCollect');
      if (this.positionInfo.isCollect) {
        const params = {
          positionId: this.positionId,
          personId: this.personId
        };
        cancelCollection(params).then((res) => {
          if (res.code == 200) {
            this.positionInfo.isCollect = false;
            uni.showToast({
              title: '取消成功'
            });
          } else {
            console.log('取消收藏失败', res);
          }
        });
      } else {
        const params = {
          positionId: this.positionId,
          personId: this.personId,
          fromType: getApp().globalData.shareFrom
        };
        addToCollection(params).then((res) => {
          if (res.code == 200) {
            this.positionInfo.isCollect = true;
            uni.showToast({
              title: '关注成功'
            });
            this.reportPositionCollect();
          } else {
            console.log('收藏失败', res);
          }
        });
      }
    },
    clickQrCode() {
      console.log('clickQrCode');
      this.isQrcodeShow = true;
    },
    openQrCodeImg() {
      uni.previewImage({
        urls: [this.positionInfo.qrCode],
        current: this.positionInfo.qrCode,
        indicator: 'default'
      });
    },
    saveToAlbum() {
      this.savePosterPath(this.positionInfo.qrCode);
    },
    savePosterPath(url) {
      let that = this;
      uni.showLoading({
        title: '正在保存图片...'
      });
      //获取用户的当前设置。获取相册权限
      uni.getSetting({
        success: (res) => {
          //如果没有相册权限
          if (!res.authSetting['scope.writePhotosAlbum']) {
            //向用户发起授权请求
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                //授权成功保存图片到系统相册
                uni.hideLoading();
                that.saveNetImageToLocal(url);
              },
              //授权失败
              fail: () => {
                uni.hideLoading();
                uni.showToast({
                  title: '未授权保存图片到相册！'
                });
              }
            });
          } else {
            console.log('saveNetImageToLocal');
            that.saveNetImageToLocal(url);
          }
        },
        fail: (res) => {}
      });
    },
    //保存网络图片到本地
    saveNetImageToLocal(url) {
      uni.downloadFile({
        url: url,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: (res) => {
                console.log('保存成功', res);
                uni.hideLoading();
                setTimeout(() => {
                  return uni.showToast({
                    title: '保存成功！',
                    duration: 1500
                  });
                }, 200);
              },
              fail: (res) => {
                console.log('保存失败', res);
                uni.hideLoading();
                console.log(res.errMsg);
                if ('saveImageToPhotosAlbum:fail cancel' == res.errMsg) {
                  return uni.showToast({
                    title: '取消保存'
                  });
                } else {
                  return uni.showToast({
                    title: '保存失败'
                  });
                }
              },
              //无论成功失败都走的回调
              complete: (res) => {
                uni.hideLoading();
              }
            });
          } else {
            console.log('网络错误', res);
            uni.showToast({
              title: '网络错误'
            });
          }
        }
      });
    },
    getFilterBrTagText(content, str) {
      if (content) {
        return content.replace(/<br>/g, str);
      } else {
        return null;
      }
    },
    timeUpdate(str) {
      if (str && str.split(' ')[0]) {
        return str.split(' ')[0];
      } else {
        return '-';
      }
    },
    getLockAndShareState() {
      const params = {
        positionId: this.positionId,
        personId: this.personId
      };
      console.log('获取解锁和分享状态', params);
      getJobDescriptionUnlockAndShare(params).then((res) => {
        if (res.code == 200) {
          console.log('获取解锁状态成功', res.data);
          if (res.data.toast == 0) {
            console.log('不显示解锁弹窗');
            this.isUnlockSuccessPopupShow = false;
          } else {
            this.isUnlockSuccessPopupShow = true;
            console.log('显示解锁弹窗');
          }
        } else {
          console.log('获取解锁状态失败');
        }
      });
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    async loginSuccessBack() {
      this.refreshData();
      wx.reportEvent('job_detail_login_consultant_click', {}); //职业详情—手机号一键登录
      await this.getUserInfoFn();
    },
    onLoginSuccess() {
      this.refreshData();
    },
    refreshData() {
      this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
      this.getHomepageData();
      this.getDetail();
    },
    //分享私聊
    onShareAppMessage(res) {
      let defaultObj = {
        title: this.chatShareTitle || this.positionName,
        path: this.sharePath,
        imageUrl: this.imageUrl
      };
      return defaultObj;
    },
    //分享朋友圈
    onShareTimeline() {
      let defaultObj = {
        title: this.platformShareTitle || this.positionName,
        path: this.sharePath,
        query: this.shareQuery,
        imageUrl: this.imageUrl
      };
      return defaultObj;
    }
  },
  watch: {
    'positionInfo.isCollect': function (newVal, oldVal) {
      // 在这里处理 `positionInfo.isCollect` 的变化
      if (newVal) {
        this.collectShow = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + 'career/';
.titleTop {
  z-index: 999;

  .title1 {
    color: #000;
  }

  .title2 {
    color: #000;
    display: flex;
    align-items: center;

    span {
      margin-left: 20rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #f75a3e;
    }

    .interested {
      color: #999999;
      font-size: 28rpx;
      background-color: transparent;
      border: none !important;
      &::after {
        border: none;
      }
    }

    .unintrested {
      color: #f75a3e;
      font-size: 28rpx;
      background-color: transparent;
      border: none !important;
      &::after {
        border: none;
      }
    }
  }
}

.wrapper {
  background: url($img-base + 'career/positionDictionary/job_detail_new_bg.png?v=1');
  background-repeat: no-repeat;
  background-size: 100% auto;
  min-height: 100vh;
  overflow-y: hidden;

  .positionInfo {
    margin: 24rpx 32rpx;
    border-radius: 24rpx;
    color: #fff;
    position: relative;

    .collectMask_bottom {
      position: absolute;
      right: 0;
      width: 382rpx;
      height: 168rpx;
      background: url($img-base + 'career/positionDictionary/maskMessage.png');
      background-repeat: no-repeat;
      background-size: auto 100%;

      .close {
        font-size: 36rpx;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        margin-top: 70rpx;
        margin-left: 326rpx;
        color: #c5a49e;
      }
    }

    .styleTitle {
      display: flex;
      justify-content: space-between;

      .positionName {
        font-size: 44rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        width: 480rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        word-break: break-all;
        color: #000000;
      }

      .styleTitleRight {
        display: flex;

        .styleQrcode {
          margin-left: 24rpx;
          display: inline-block;
          width: 52rpx;
          height: 52rpx;
        }

        .btn {
          height: 52rpx;
          width: 120rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border: none;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          border-radius: 8rpx;
          color: #888;
          line-height: 28rpx;
          padding: 0;
          background: transparent;
          z-index: 9999;
        }

        .aloha {
          background: #f75a3e;
          color: #fff;
        }
      }
    }

    .positionDesc {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #52586d;
      line-height: 36rpx;
      margin-top: 18rpx;
    }

    .positionUpdate {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #a3bdd3;
      line-height: 34rpx;
      margin-top: 22rpx;

      .styleJobDetailViewNumber {
        display: flex;
        flex-direction: row;
        align-items: center;

        .styleImageJobDetailView {
          width: 32rpx;
          height: 24rpx;
        }

        .styleTextJobDetailViewNumber {
          color: #a3bdd3;
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }
    }

    .positionDefine {
      margin: 56rpx 0;
      .bottom {
        margin: 16rpx 0rpx;
        .content {
          font-family: D-DIN-PRO, D-DIN-PRO;
          font-weight: bold;
          font-size: 30rpx;
          color: #000000;
          margin-bottom: 36rpx;
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          justify-content: flex-start;
          position: relative;
          margin: 0px;
          .avatar {
            position: absolute;
            top: 45%;
            right: 0;
            width: 32rpx;
            height: 32rpx;
            background-image: url($img-base-person + 'positionDictionary/downArrowInBasicInfo.png');
            background-size: 100%;

            img {
              width: 32rpx;
              height: 32rpx;
            }
          }

          .avatar-rotate {
            position: absolute;
            top: 75%;
            right: 0;
            width: 32rpx;
            height: 32rpx;
            transform: rotate(180deg);
            background-image: url($img-base-person + 'positionDictionary/downArrowInBasicInfo.png');
            background-size: 100%;

            img {
              width: 32rpx;
              height: 32rpx;
            }
          }

          span-ios {
            width: 150rpx;
            margin-top: 19rpx;
          }

          span-android {
            width: 150rpx;
            margin-top: 5rpx;
          }

          .introduction {
            /* flex-grow: 1; */
            width: 670rpx;
            overflow: hidden;
            /* max-height: 84rpx; */
            font-weight: 400;
            font-size: 26rpx;
            color: #42637a;
            line-height: 80rpx;
            font-family: PingFangSC, PingFang SC;
            padding: 0;
          }

          .my-introduction {
            width: 670rpx;
            white-space: pre-wrap;
            font-weight: 400;
            font-size: 26rpx;
            color: #42637a;
            line-height: 48rpx;
            font-family: PingFangSC, PingFang SC;
          }

          .glass {
            width: 60rpx;
            height: 100%;
            position: absolute;
            right: 18rpx;
            background: linear-gradient(
              270deg,
              #e1f0fb 0%,
              rgba(227, 241, 251, 0) 100%
            );
          }
          .u-input__textarea {
            padding: 0 !important;
          }
        }
      }
    }

    .alc {
      align-items: center;
    }

    .positionListName {
      display: flex;
      margin-bottom: 34rpx;

      .title {
        width: 150rpx;
        font-size: 32rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
      }

      .otherName {
        margin-top: 3rpx;
        font-size: 24rpx;
        flex: 1;
        overflow: hidden;
        /* 允许换行但不执行断行 */
        white-space: normal;
        /* -webkit-line-clamp: 行数 */
        display: -webkit-box;
        /* -webkit-box-orient: 竖向排列 */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 超长文本显示省略号 */
        text-overflow: ellipsis;
      }

      .samePosition {
        flex: 1;
        display: flex;
        overflow-x: hidden;
        flex-wrap: wrap;

        .positionClickTo {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          font-size: 24rpx;
          padding: 10rpx 12rpx;
          border-radius: 6rpx;
          background: #546279;
          margin-right: 16rpx;
          margin-bottom: 10rpx;

          img {
            width: 16rpx;
            height: 22rpx;
            margin-left: 8rpx;
          }
        }
      }
    }

    .mb {
      margin-bottom: 0px;
    }
  }
}

.styleQrcodePop {
  background-color: transparent;

  .styleQrcodePopContainer {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 32rpx;

    .styleQrcodePopTitle {
      margin-top: 62rpx;
      margin-left: auto;
      margin-right: auto;
      height: 40rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 40rpx;
    }

    .styleUserQRCode {
      margin: 26rpx auto;
      width: 310rpx;
      height: 310rpx;
    }

    .styleQrcodePersonName {
      margin-top: 26rpx;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 19rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #080808;
    }
  }

  .styleQrcodeSaveContainer {
    width: 530rpx;
    height: 72rpx;
    margin-top: 28rpx;
    background: #f75a3e;
    border-radius: 46rpx;
    display: flex;

    .styleQrcodeSave {
      color: #ffffff;
      margin-top: auto;
      margin-left: auto;
      margin-bottom: auto;
      margin-right: auto;
    }
  }

  ::v-deep .u-mode-center-box {
    background-color: transparent;
  }
}

.menu {
  width: 100%;
  // height: 85rpx;
  background: #f7f8fa;
  padding-top: 20rpx;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;

  z-index: 999;
}

.menuFixed {
  position: fixed;
}

.placeholder {
  height: 85rpx;
  /* 与menu一样的高度 */
  visibility: hidden;
  /* 不可见 */
}

.componentsOrder {
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  margin-top: -10rpx;
  padding-bottom: 90rpx;
  .componentsOut {
    position: relative;

    .scrollItemToTop {
      position: absolute;
      visibility: hidden;
      width: 100%;
      height: 1px;
      top: -80rpx;
    }

    .banner-box {
      margin: 24rpx 32rpx;
    }
  }
}

.header {
  background: red;
  margin-bottom: -1rpx;
  position: fixed;
  z-index: 999;
  width: 100%;
}

// .content {
//   height: calc(100vh - 200rpx);
// }
.bottomBlank {
  height: 90rpx;
}

::v-deep .u-tabs {
  background: #f7f8fa !important;
}

.stylePopUnlockSuccess {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;

  .styleUnlockSuccessContainer {
    .styleUnlockSuccess {
      width: 694rpx;
      height: 382rpx;
    }
  }
}

.emptyForIphone {
  width: 10rpx;
  height: 50rpx;
  content: '';
}

.collectPic {
  position: absolute;
  width: 400rpx;
  height: 200rpx;
  top: 180rpx;
  right: 20rpx;
  background: rgba(255, 255, 255, 0.2);
}

.bottomText {
  text-align: center;
  font-size: 24rpx;
  color: #bfbfbf;
  margin: 34rpx 0;
}

.zhixun {
  background: url('https://upload.yl1001.com/upload/images/view?file=rE8YsE5aTpJwjnu5wJh7-,4V/GiKJZvOUVtn,jsp/pJB_Ghoo88vTOjbs1z_o.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
}
</style>
<style lang="scss">
.stylePopUnlockSuccess {
  ::v-deep .u-mode-center-box {
    background-color: transparent !important;
  }
}
</style>
